@import "gn_bootstrap.less";

@viewport-padding: 1em;
@transition-params: .3s ease;

@gn-popup-max-width: 1200px;


[data-gn-layer-styles] {
  word-break: break-all;
}

[gn-main-viewer],
.gn-main-viewer {
  position: relative;
  height:  calc(~"100vh - 102px");

  [role=tooltip] {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    right: 0;
  }
  button:focus {
    outline: 0;
  }
  button:focus [role=tooltip],
  button:hover [role=tooltip] {
    clip: auto;
    right: 3.5em;
    background: @brand-success;
    color: #fff;
    padding: 8px 12px;
    margin-top: -7px;
    font-size: 12px;
    border-radius: 0;
    text-shadow: none;
    z-index: 9000;
  }
  .search-container {
    button:hover [role=tooltip] {
      right: auto;
      margin-left: 1.5em;
      margin-top: -7px;
      padding-top: 9px;
    }
  }
  @media screen and (max-height: 768px) {
    .control-tools {
      button:hover [role=tooltip] {
        right: auto;
        margin-left: 1.5em;
        margin-top: -7px;
        padding-top: 9px;
      }
      .btn-3d:hover [role=tooltip] {
        margin-left: -1.7em;
      }
    }
  }

  fieldset legend {
    margin-bottom: 2px;
  }

  .gn-layertree-filter {
    margin: 0 0 15px 0px;
    position:relative;
    .clear {
      right: 1em;
      position: absolute;
      top: 7px;
    }
  }

  .gn-map-layer {
    word-break: break-all;
  }

  .wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  [ol-map] {
    width: 100%;
    height:  calc(~"100vh - 102px");
    &.gn-gfi-loading:hover {
      cursor: wait;
    }
  }
  .popover-dropdown, [gn-popover-dropdown] {
    .dropdown-menu {
      max-height: 45vh;
      overflow: auto;

    }
    .dropdown-toggle {
      padding: 0;
      border: none;
    }
  }
  .search-container {
    position: absolute;
    top: @viewport-padding;
    left: @viewport-padding;
    width: 20em;
    max-width: 75%;
    .dropdown-menu {
      width: 100%;
      top: ~"calc(100% - 3px)";
      background: rgba(255,255,255,.9);
      padding: 0 0 1em;
      h5 {
        padding: 0 1em;
      }
      ul {
        margin:0;
        background: #fff;
      }
      li {
        background: transparent;
        padding: 0;
        &:hover {
        }
      }
      a {
        padding: .5em 1em;
        display: block;
        em {
          font-size: 90%;
          color: grey;
        }
      }
    }
    .clear {
      position: absolute;
      top: .75em;
      right: 3.5em;
      color: #666;
      z-index: 99;
      &:hover {
        cursor: pointer;
        color: #222;
      }
    }
    .input-group-addon:first-child, .input-group-btn:last-child > .btn {
      border-radius: 0;
    }
  }
  .tools {
    position: absolute;
    top: @viewport-padding;
    right: 1em;
    width: 2.8em;
    border-top: 1px solid @btn-default-border;
    z-index: 85;
    button, [role="button"] {
      border-top: 0;
      height: 2.8em;
      border-radius: 0;
      background: #f5f5f5;
      width: 2.8em;
      transition: background @transition-params;
      &.active {
        border-left-color: #fff;
        border-radius: 0;
        box-shadow: none;
        border-color: @btn-default-border;
        border-left-color: #fff;
        background: #fff;
      }
    }

    .tools-spacer {
      height: 1.4em;
    }
  }
  .control-tools {
    top: auto;
    bottom: calc(~"50px + 1em");
    position: fixed;
    .badge-2d, .badge-3d {
      background-color: @brand-danger;
      z-index: 9001;
    }
    .badge-left {
      margin: -30px 0 0 -34px;
    }
    .badge-right {
      display: none;
    }
    @media screen and (max-height: 768px) {
      left: @viewport-padding;
      .badge-right {
        margin-top: -30px;
        display: inline-block;
      }
      .badge-left {
        display: none;
      }
    }
  }

  & > .panel {
    background: #fff;
  }
  .panel-tools {
    position: absolute;
    top: @viewport-padding;
    right: 3.8em;
    width: 26em;
    margin-right: -1px;
    border-radius: 0;
    min-height: 30em;
    max-height: ~"calc(100% - 2em)";
    max-width: ~"calc(100% - 4.5em)";
    overflow-y: auto;
    transition: opacity @transition-params;
    z-index: 80;
    border-color: #ccc;
    .panel-heading {
      border-bottom: 0;
      h3 {
        margin-top: 15px;
        font-size: 22px;
      }
    }
    li[gn-layermanager-item] {
      .fa-arrows-alt,.gn-layer-ordering {
        opacity: 0;
        transition: opacity @transition-params;
      }
      label {
        padding: 0px;
        display: block;
        margin-bottom: 0px;
      }
    }
    .gn-layer-outofrange > label {
      color: #999;
    }
    .gn-searchlayer-list {
      margin: 0;
      padding: 0;
      list-style: none;
      .clearfix();
      .gn-searchlayer {
        h3 {
          font-size: 16px;
          margin: 10px 0;
          color: #333;
        }
        label {
          font-size: 90%;
          max-width: 68%;
        }
        ul {
          padding: 0 0 0 20px;
          list-style: none;
          li {
            margin-bottom: 3px;
            a {
              cursor: pointer;
              &:hover {
                text-decoration: none;
              }
            }
          }
        }
      }
    }

    .list-group-item {
      transition: max-height @transition-params;
      &:hover {
        .fa-arrows-alt, .gn-layer-ordering {
          opacity: 1
        }
      }
      label {
        font-weight: normal;
      }
      & > label {
        font-size: 90%;
        max-width: 72%;
      }
    }
    .btn-group.gn-layer-btn {
      display: inherit;
    }
    .btn-group {
      display: flex;
      .btn {
        flex: 1;
        white-space: normal;
      }
      .dropdown-menu > li > a {
        padding: 8px 20px;
      }
    }
    .flux, .context {
      margin: .2em;
    }
    .baselayer {
      .dropdown-menu {
        width: 100%;
      }
    }
    .gn-layer-actions {
      [gn-popover-anchor] {
        text-decoration: none;
      }
    }
    .unfold {
      opacity: 0;
      transition: opacity @transition-params;
      float: right;
      border: none;
      background: none;
      padding: 0;
    }
    .unfold,
    .close {
      margin-top: -.4em;
      margin-right: .2em;
      opacity: 1;
      &:hover, &:active {
        background: 0;
        box-shadow: none;
        color: @brand-danger;
      }
    }
    .details {
      font-size: 90%;
      margin: 0 0 .5em 0;
      p {
        overflow: auto;
      }
      .delete {
        .btn-xs;
        .pull-right;
        clear: both;
        margin-top: 1.3em;
      }
    }
    h4 {
      margin: 1em 0 0.5em 0;
    }
    h5 {
      margin: .2em 0;
    }
    [gn-layermanager] {
      max-height: 44em;
      overflow-y: auto;
      .gn-layer-ordering {
        margin-top: -4px;
        margin-right: -10px;
        .fa {
          padding: 0px 10px;
          font-size: 0.8em;
        }
      }
      ul {
        margin-bottom: 4px;
      }
    }
    .metadata {
      .btn;
      .btn-link;
      width: 100%;
      font-style: italic;
      font-size: 13px;
    }
    label {
      font-size: 90%;
      font-weight: normal;
    }
    .checkbox {
      label {
        font-size: 100%;
      }
    }
    .panel-carousel {
      .list-group-item {
        border: 0;
        padding-bottom: 0;
        h5 {
          margin: 0.3em 0;
          line-height: 1.4;
        }
      }
    }
  }

  @import "../components/viewer/wmsimport/style/layertree.less";

  .fu {
    position: relative;
    input[type=file] {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      width: 100%;
    }
  }

  //.collapsed {
  //  max-height: 0;
  //  min-height: 0;
  //  overflow-y: hidden;
  //  border: 0;
  //  margin: 0;
  //  padding: 0;
  //}
  .force-hide {
    opacity: 0;
    pointer-events: none;
  }

  /* hackish tmp */
  .ol-overlaycontainer-stopevent {
    /* display: none; */
  }
  .overlay {
    position: absolute;
    bottom: 12px;
    left: ~"calc(-10px - 2em)";
    background: rgba(60,60,60,.8);
    line-height: 2em;
    padding: 1em;
    width: 17em;
    color: #fff;
    text-shadow: 0 0 1px #000;
    border-radius: 2px;
    font-size: 12px;
    &:after {
      content: ' ';
      position: absolute;
      bottom: -10px;
      left: 2em;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 10px 0 10px;
      border-color: rgba(60,60,60,.8) transparent;
    }
    dl {
      margin-bottom: 0;
      dl dd, dl dt {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
        text-align: left;
      }
    }
    dt {
      width: 6em;
    }
    dd {
      margin-left: 6.5em;
    }
  }

  /* jquery-ui slider */
  .ui-slider {
    position: relative;
    text-align: left;
    border: 1px solid #ddd;
    height: .7em;
    margin: 0.8em 0;

    .ui-slider-range {
      position: absolute;
      z-index: 1;
      font-size: .7em;
      display: block;
      border: 0;
      background-position: 0 0;
      background-color: dimgrey;
      top: 0;
      height: 100%;
    }
    .ui-slider-handle {
      top: -.3em;
      margin-left: -.6em;
      position: absolute;
      z-index: 2;
      width: 0.8em;
      height: 1.2em;
      border-radius: 1.2em;
      cursor: ew-resize;
    }
    .ui-state-default {
      border: 1px solid #d3d3d3;
      background: #e6e6e6 none 50% 50% repeat-x;
      font-weight: normal;
      color: #555555;
    }
  }

  /* Measures */
  .gn-measure-text {
    .alert {
      margin-top: 1em;
    }
    dl {
      margin-top: 10px;
    }
    dt {
      width: 100px;
      text-align: left;
    }
    dd {
      margin-left: 110px;
    }
  }


  .alert-warning  {
    background: rgba(252,248,227,.6)
  }
  .panel-sm {
    font-size: @font-size-small;
  }

  [gn-localisation-input] {
    .dropdown-menu {
      top: calc(~"100% - 2px");
      width: auto;
      max-width: 85vw;
      padding-bottom: 0;
      border-radius: 0;
      .list-group-item {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        a {
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 85vw;
          min-width: auto;
          @media (max-width: @screen-xs-max) {
            em {
              display: block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 85vw;
            }
          }
        }
      }
    }
  }
  .gn-draw-styleform {
    > div > input {
      margin: 15px 0;
      width: 80%;
    }
    label {
      font-weight: normal;
      font-size: 13px;
    }
    form {
      margin-top: 10px;
      min-height: 17em;
      input[type='text'] {
        width: 146px;
      }
      input[type='number'] {
        width: 55px;
      }
      .form-group {
        margin-top: 2px;
        margin-bottom: 8px;
      }
    }
  }


  [gn-data-filter-view],
  [data-gn-data-filter-view],
  .gn-data-filter-view {
    table {
      font-size: 80%;
    }
    .gn-btn-data-download {
      position: absolute;
      right: 0px;
      top: 18px;
    }
  }
}

[gn-popup] {
  display: none;
  min-width: 200px;
  max-width: @gn-popup-max-width;
  min-height: 100px;
  max-height: ~"calc(100% - 89px)";
  z-index: 2000;
  height: auto;

  @media (max-width: @screen-tablet) {
    z-index: 1500;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    max-height: none;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: @screen-phone) {
    position: fixed !important;
    overflow: hidden;
  }
}

[gn-bootstrap-datepicker].input-group[class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

.gn-popup-content {
  overflow: auto;
  max-width: inherit;
  max-height: 600px;
  font-size: 12px;
  @media (max-width: @screen-phone) {
    width: 100%;
    height: auto;
    max-height: none;
    position: absolute;
    top: 36px;
    bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    table {
      width: 100% !important;
      td {
        vertical-align: top;
      }
    }
  }
  .gn-popup-iframe {
    width: 1000px;
    height: 600px;

    &.profile {
      width: 500px;
      height: 400px;
    }
    &.transect {
      width: 400px;
      height: 600px;
    }
    &.time {
      width: 400px;
      height: 300px;
    }
  }
}



[data-gn-wfs-filter-facets], [gn-wfs-filter-facets] {
  font-size:12px;
  .gn-facet {
    > .list-group {
      overflow: auto;
      max-height: 10em;
      margin-bottom: 10px;
    }

    .list-group-item:hover {
      cursor: pointer;
    }
    .fa {
      margin-right: .3em;
      font-size: 14px;
    }
  }

  .btn-group {
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block !important;
  }

  .close {
    font-size: 14px;
  }
}

[gn-wfs-filter-facets-tree] {
  .list-group .list-group{
    display: none;
  }
  .gn-leaf {
    margin-left: 16px;
  }
}

gn-features-tables, .gn-viewer-info-pane {
  display          : block;
  position         : absolute;
  bottom           : 0;
  left             : 1em;
  right            : 4.5em;
  background-color:#fff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 85;
  @media screen and (max-height: 768px) {
    left: 4.5em;
  }
  .nav li a {
    background  : rgba(255, 255, 255, .5);
    text-shadow : 0 0 1px white;
    .badge {
      text-shadow : none;
    }
  }
  .tab-content {
    background : white;
    min-height : 5em;
    padding    : 1em;
  }
  .gn-features-table {
    padding          : .25em;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
  }
  .layername {
    display        : inline-block;
    max-width      : 10em;
    text-overflow  : ellipsis;
    white-space    : nowrap;
    overflow       : hidden;
    vertical-align : middle;
  }
  .close {
    font-size : 24px;
    margin    : .25em .4em 0 0;
  }

  .profile {
    width: 100%;
    min-height: 20em;
    height: 200px;
    overflow-x: auto;
    svg {
      width: auto;
    }
    .overlay {
      width: 100%;
    }
  }
}

gn-wps-process-form {
  .popover-parent {
    position: relative;
  }

  ul {
    list-style: none;
  }

  .panel {
    background: none;
    margin-bottom: 0px;
    border: none;
    box-shadow: none;

    .panel-heading {
      height: auto;
      line-height: 1.2em;
      padding: 6px 15px;

      .close {
        margin-right: -0.2em;
      }
    }
  }

  .form-group .output-selection {
    display: inline-block;
  }
  .form-group .input-group {
    margin-bottom: 6px;
  }
}

gn-geometry-tool .btn-group {
  display: flex;
  .btn {
    flex-basis: initial !important;
    flex-grow: 1;
    &.btn-icon {
      flex-grow: 0 !important;
    }
  }
}

.ol-dragbox, .gnbbox-dragbox {
   background-color: rgba(255,255,255,0.4);
   border: solid 2px red;
 }

.layermanager-item-menu {
  margin: -9px -14px;
  ul {
    li {
      padding: 8px 10px !important;
      border-top: 1px solid #ccc;
      a {
        font-size: 14px;
      }
      &:first-child {
        border-top: 0;
      }
      label {
        color: #757575;
      }
    }
    input[type="range"] {
      width: 100% !important;
    }
  }
}

[gn-ows-context] {
  ul.gn-resultview li.gn-grid {
    min-width: calc(~"50% - 10px");
    max-height: 170px;
    height: auto;
    padding: 0px;
    margin: 0px 4px 4px 0;
    border-radius: 2px;
    text-align: left;
    .gn-img-thumbnail-caption {
      display: inline-block;
      padding: 3px 3px 3px 6px;
      font-style: normal;
      font-size: 100%;
    }
    a:hover {
      .gn-img-thumbnail-caption {
        text-decoration: none;
      }
    }
  }
  .gn-resultview .gn-md-thumbnail {
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0px !important;
    .gn-img-thumbnail {
      max-width: 100%;
    }
  }
}
[data-gn-search-layer-for-map] {
  .gn-md-thumbnail .gn-img-thumbnail {
    width: 40px;
    height: 40px;
    margin: 2px !important;
  }
}

// heatmap overlay with count info
.heatmap-overlay {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px;
  line-height: 1em;
  color: white;
  pointer-events: none;
}

// attribution mixin
.gn-attribution() {
  bottom: 4px;
  right: auto;
  left: 4px;
  height: auto;
  padding: 5px;
  border-radius: 0;
  ul {
    font-size: 1rem;
    padding-left: 0;
    padding-right: 10px;
    li {
      white-space: nowrap;
    }
  }
}
